<html>
  <head>
    <title>search for nutrient in the database</title>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript">
document.observe('dom:loaded', function() {
    $('match_nutrient').observe('change', function(e) {
        var t = Event.element(e).value;
        // alert(t);
        // search for matches to t

    });
});
    </script>
  </head>
  <body>
    <h1>Nutrients in the USDA SR23 Database</h1>
    <h3><span tal:content="count">count</span> results found</h3>
    
    <table class="search">
      <tbody>
        <tr>
          <td class="td_title">search for nutrient:</td>
          <td class="td_content">
            <input type="text" id="match_nutrient" name="nutrient" size="20" maxlength="150"/></td>
        </tr>
      </tbody>
    </table>

    <div id="search_results">
      <ul>
        <li tal:repeat="nutrient nutrients">
          <span tal:content="nutrient/ndb_no">NDB_No</span> | 
          <span tal:content="nutrient/long_desc">Long_Desc</span> |
          <button class="add_button">add to list</button>
        </li>
      </ul>  
    </div>
  </body>
</html>  
